<template>
	<m-layout gap="0 24" :title="wards==1?'全区数据[打印机]':'全区数据[AI美食机]'">
		<view class="head  flex-column" slot="header" v-if="devices.length>0">
			<view class="ul flex fs24">
				<view class="flex flex-2">
					<text>型号：</text>
					<picker @change="bindDevicesChange" :value="gid" range-key="deviceName" :range="devices">
						<view class="flex">
							<view v-if="devices[gid]">{{devices[gid]['deviceName']}}</view>
							<m-icon spa="10" color="#C0C0C0" type="icon-xiangxia"></m-icon>
						</view>
					</picker>
				</view>
				<view class="flex flex-1">
					<text>区域：</text>
					<picker v-if="areas[area]" @change="bindTradeChange" value="area" range-key="areaName"
						:range="areas">
						<view class="flex">
							<view>{{areas[area]['areaName']}}</view>
							<m-icon spa="10" color="#C0C0C0" type="icon-xiangxia"></m-icon>
						</view>
					</picker>
				</view>
			</view>
			<view class="flex fs24 ptb-12 mt-4 jc-center">
				<view class="flex text-grey" @click="selectDate('subtract')">
					<m-icon spa="10" color="#C0C0C0" rotate="90" type="icon-xiangxia" />
					<text>前一天</text>
				</view>
				<view class="mlr-48 flex">
					<picker mode="date" @change="bindDateChange">
						<view class="flex">
							<m-icon spa="10" size="32" color="#ecc928" type="icon-qiandao"></m-icon>
							<text class="text-black fs24">{{currentDate}}</text>
							<m-icon spa="10" size="28" color="#ecc928"
								type="icon-zelvxuanzefeiyongdaosanjiaoxingfandui"></m-icon>
						</view>
					</picker>
				</view>
				<view class="flex text-grey" @click="selectDate('add')">
					<text>后一天</text>
					<m-icon spa="10" color="#C0C0C0" rotate="-90" type="icon-xiangxia" />
				</view>
			</view>
		</view>
		<view class="flex-column pt-24" v-if="devices.length>0">
			<m-block class="totalData" bgColor="linear-gradient( 133deg, #FFAD3F 0%, #FF711F 100%)">
				<view class="flex-between jc-space-around fs24 borderAfter ptb-24 borderBottom">
					<view class="ta-center flex-column">
						<text>总营收入（元）</text>
						<text class="fs26 fw-600">
							<template v-if="allData.fhrate">{{(allData.income_s > 0 ? allData.income_s*(allData.workingCount+allData.wordingCount_1)/allData.fhrate : 0) | integer(2)}}</template>
							<template v-else>0</template>
						</text>
					</view>
					<view class="ta-center flex-column">
						<text>已托管数（台）</text>
						<text class="fs26 fw-600">{{allData.workingCount}}</text>
					</view>
				</view>
				<view class="flex-between jc-space-around fs24 borderAfter ptb-24">
					<view class="ta-center flex-column">
						<text>分润收益（元）</text>
						<text class="fs26 fw-600">{{allData.income_s>0?allData.income_s:0 | integer(2)}}</text>
					</view>
					<view class="ta-center flex-column">
						<text>新增设备（台）</text>
						<text
							class="fs26 fw-600">{{Number(allData.sellCount || 0) + Number(allData.totalCount1 || 0)}}</text>
					</view>
				</view>
			</m-block>
			<m-block class="mt-24" gap="24 24">
				<view class="flex mb-24">
					<text class="bar mr-12"></text>
					<text class="fs24">全区数据占比</text>
				</view>
				<qiun-data-charts :ontouch="true" type="column" :opts="opts" :chartData="chartData" />
			</m-block>
		</view>
	    <m-empty v-else></m-empty>
	</m-layout>
</template>

<script>
	import { CreaditDay, creaditDay7, myareatt } from "@/api/Trade.js"
	export default {
		name: '',
		data() {
			return {
				allData: '',
				wards: 1,
				area: 0,
				gid: 0,
				scrollTop: 0,
				listArr: [], // 商品列表
				isLoading: true,
				areas: [],
				devices: [],
				currentDate: this.formatDate(new Date()),
				dateStr: "",
				chartData: {},
				opts: {
					color: ["#ffad3f", "#ff711f"],
					padding: [15, 15, 0, 5],
					enableScroll: true,
					touchMoveLimit: 24,
					xAxis: {
						disableGrid: true,
						itemCount: 5,
						scrollShow: true,
						fontSize: 11
						// label: {
						// 	// 使用formatter函数自定义标签
						// 	formatter: function(value, index) {
						// 		console.log('value', value)
						// 		// 使用\n实现换行
						// 		return value.split(' ').join('\n');
						// 	}
						// }
					},
					legend: {
						show: true,
					},
					yAxis: {
						fontSize: 11,
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 12,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				}
			};
		},
		watch: {
			gid(val) {
				this.area = 0;
				this.areas = this.devices[val].areas
			}
		},
		onPageScroll({ scrollTop }) {
			// this.scrollTop = scrollTop;
		},
		async onLoad({ wards }) {
			this.wards = wards;
			this.init();
		},
		async onShow() {},
		methods: {
			// 日期选择监听
			bindDateChange(e) {
				this.currentDate = e.detail.value;
				this.getD()
			},
			formatDate(date) {
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
			},
			selectDate(action) {
				let date = new Date(this.currentDate);
				if (action === 'subtract') {
					date.setDate(date.getDate() - 1);
				} else if (action === 'add') {
					date.setDate(date.getDate() + 1);
				}
				this.currentDate = this.formatDate(date);
				this.getD()
			},
			// 区域选择
			bindTradeChange({ detail: { value } }) {
				this.area = Number(value)
				this.getD();
			},
			// 设备选择
			bindDevicesChange({ detail: { value } }) {
				this.gid = Number(value)
				this.getD();
			},
			async init() {
				// this.isLoading = true;
				await this.myareattFn();
				this.getD()

			},
			async getD() {
				if(!this.devices.length) return
				this.CreaditDayFn()
				this.creaditDay7Fn()
			},
			async myareattFn() {
				const { success, msg, data } = await myareatt({
					wards: this.wards
				});
				this.devices = data.devices;
				if(data.devices.length>0) this.areas = this.devices[this.gid].areas
			},
			// 全区数据
			async CreaditDayFn() {
				const { success, msg, data } = await CreaditDay({
					areaid: this.areas[this.area]['areaId'],
					gid: this.devices[this.gid]['gid'],
					days: this.currentDate.replace(/-/g, ''),
				});
				console.log('data', data)
				this.allData = data;
			},
			// 7天对比图
			async creaditDay7Fn() {
				console.log('this.areas[this.area]', this.areas[this.area])
				const { success, msg, data } = await creaditDay7({
					areaid: this.areas[this.area]['areaId'],
					gid: this.devices[this.gid]['gid'],
					days: this.currentDate
				});
				const day = [],
					all = [],
					user = [];
				data.reverse().forEach(item => {
					day.push(item.days.slice(5))
					all.push(item.total)
					user.push(item.mytotal)
				})
				let res = {
					categories: day,
					series: [{
							name: "全区分红",
							data: all
						},
						{
							name: "个人分红",
							data: user
						}
					]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			}
		},
		onPullDownRefresh() {
			this.init();
		},
	};
</script>

<style lang="scss">
	page {

		// background: url('../../../static/images/pages/reward-center/bg.png') no-repeat;
		// background-size: 100% 300rpx;
		// background-color: #F6F6F6;
	}

	.head {
		// background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%) !important;
		padding: 0 24rpx 10rpx;
		margin: 0;

		.ul {
			overflow-x: auto;

			.li {
				padding-bottom: 12rpx;
				min-width: 60rpx;
				margin-right: 36rpx;

				text {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666;
				}
			}

			.active {
				background: linear-gradient(0deg, var(--theme) 0%, rgba(251, 251, 251, 0.6) 22%) no-repeat;

				text {
					display: inline-block;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}
		}
	}

	.totalData {
		padding: 12rpx 24rpx !important;
		color: #FFFFFF;
	}

	.borderAfter {
		position: relative;

	}

	.borderAfter::after {
		position: absolute;
		content: '';
		height: 80%;
		width: 2rpx;
		background-color: rgba(255, 255, 255, 0.2);
	}

	.borderBottom {
		border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);
	}

	.bar {
		width: 8rpx;
		height: 30rpx;
		background: #FFA83C;
		border-radius: 0px 0px 0px 0px;
	}
</style>